<script setup>
import { computed, onMounted, reactive, ref, watchEffect } from 'vue';
import data from "@/untils/address/states.json"
const formLabelWidth = '100px'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { Decrypt, Encrypt } from '../../untils/passjs/security';
import { equipmentType, AddInventory, getRoledata, updateInventory, getRoledataList } from '../../api/api';
let formRef = ref(null)
let props = defineProps({
    dialogFormVisible: Boolean,
    formlist: Object,
    changeType: String
})
// 国家列表数据
const datasel = ref([]);

// 州/省列表数据
const states = ref([]);
// 国家与州/省的映射关系
const countryStates = ref({});
// watchEffect(()=>{
//     props.formlist.contry = toString(props.formlist.area).split("/")[0]
//     props.formlist.addresszhou = toString(props.formlist.area).split("/")[1]
// })
watchEffect(() => {
    if (props.dialogFormVisible) {
        getequipmentType()
    }
})
onMounted(() => {
})
let equipmentTypeList = ref([])
async function getequipmentType() {
    let res = await equipmentType()
    equipmentTypeList.value = res.data
}
let emits = defineEmits(["close", 'update:formlist'])
function closedialog(formEl) {
    // // 再次点击清空inp的值
    if (!formEl) return
    // formEl.resetFields()
    // // // 向父组件发送自定义事件
    emits("close")
}
async function addsubmit(formEl) {
    if (props.changeType == "add") {
        console.log(props.formlist, '添加操作');
        if (props.formlist.equipmentName == "" || props.formlist.equipmentNumber == "" || props.formlist.equipmentType == null || props.formlist.inventoryStatus == null) {
            ElMessage.error("Please fill in the complete information of the incoming equipment")
            return;
        }
        let requestdata = {
            equipmentName: props.formlist.equipmentName,
            equipmentNumber: props.formlist.equipmentNumber,
            equipmentModel: props.formlist.equipmentModel,
            equipmentType: props.formlist.equipmentType,
            inventoryStatus: props.formlist.inventoryStatus
        }
        console.log(requestdata);
        let res = await AddInventory(requestdata);
        console.log(res);
        if (res.code == 200) {
            ElMessage.success(res.msg)
            emits("close")
        }

    } else if (props.changeType == "update") {
        // //编辑操作
        console.log(props.formlist, "编辑数据");
        let requestData = {
            equipmentId: props.formlist.equipmentId,
            equipmentName: props.formlist.equipmentName,
            equipmentNumber: props.formlist.equipmentNumber,
            equipmentModel: props.formlist.equipmentModel,
            inventoryStatus: props.formlist.inventoryStatus
        }
        console.log(requestData);
        let res = await updateInventory(requestData);
        if(res.code == 200){
             ElMessage.success(res.msg)
            emits("close")
        }
        
    }
}
let roleOptions = ref([])
function colseclose(formRef) {
    emits("close")
    // closedialog(formRef)
    // if(props.dialogFormVisible){
    // roleOptions.value =[]
    // }
}
let InventoryRules = ref({
    equipmentName: [
        {
            required: true,
            message: 'Please input a equipmentName',
            trigger: 'blur'
        },
    ],
    equipmentNumber: [
        {
            required: true,
            message: 'Please input a equipmentNumber',
            trigger: 'blur'
        },
    ],
    equipmentType: [
        {
            required: true,
            message: 'Please input a equipmentType',
            trigger: 'blur'
        },
    ],
    inventoryStatus: [
        {
            required: true,
            message: 'Please input a inventoryStatus',
            trigger: 'blur'
        },
    ],
})
</script>
<template>
    <div class="editclass">
        <el-dialog :model-value="dialogFormVisible" style="padding: 40px"
            :title="changeType == 'add' ? 'be put in storage' : 'edit'" @close="colseclose">
            <el-form :model="formlist" ref="formRef" class="two-column-form" :rules="InventoryRules">
                <div class="form-row">
                    <!-- 设备名称 -->
                    <el-form-item label="name" :label-width="formLabelWidth" prop="equipmentName">
                        <el-input v-model="formlist.equipmentName" placeholder="Please input equipmentName"
                            style="width: 220px;" />
                    </el-form-item>
                    <!-- 设备编号 -->
                    <el-form-item label="code" :label-width="formLabelWidth" prop="equipmentNumber">
                        <el-input v-model="formlist.equipmentNumber" autocomplete="off"
                            placeholder="Please input equipmentNumber" style="width: 220px;" />
                    </el-form-item>
                </div>
                <div class="form-row">
                    <!-- 设备型号 -->
                    <el-form-item label="model" :label-width="formLabelWidth" prop="equipmentModel">
                        <el-input v-model="formlist.equipmentModel" autocomplete="off"
                            placeholder="Please input equipmentModel" style="width: 220px;" />
                    </el-form-item>
                    <!-- 库存状态 -->
                    <el-form-item label="InventoryStatus" :label-width="formLabelWidth" prop="inventoryStatus">
                        <el-select style="width: 220px" placeholder="please select inventoryStatus" v-model="formlist.inventoryStatus"
                    >
                            <el-option label="New_State" :value="0" />
                            <el-option label="Maintenance_State" :value="1" />
                            <el-option label="Return_State" :value="2" />
                        </el-select>
                    </el-form-item>

                </div>
                <div class="form-row">
                    <!-- 设备类型 -->
                    <el-form-item label="type" :label-width="formLabelWidth" prop="equipmentType"
                        v-if="changeType == 'add'">
                        <!-- <el-input v-model="formlist.equipment_type" autocomplete="off"
                            placeholder="Please input equipment_type" style="width: 220px;" /> -->
                        <el-select style="width: 220px" placeholder="please select equipmentType" v-model="formlist.equipmentType">
                            <el-option :label="item.name" :value="item.number" v-for="item in equipmentTypeList" />
                        </el-select>
                    </el-form-item>
                    <el-form-item></el-form-item>
                </div>

            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="colseclose">cancel</el-button>
                    <el-button type="primary" @click="addsubmit(formRef)">
                        {{ changeType == "add" ? 'be put in storage' : 'edit' }}
                    </el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>
<style lang="scss" scoped>
.two-column-form .form-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.two-column-form .el-form-item {
    width: 45%;
}

.address-container {
    display: flex;
    align-items: center;
}

/* 调整表单标签宽度 */
.two-column-form :deep(.el-form-item__label) {
    width: 80px;
    text-align: right;
    padding-right: 12px;
}

/* 响应式设计 - 小屏幕时变为单列 */
@media (max-width: 768px) {
    .two-column-form .form-row {
        flex-direction: column;


        .el-form-item {
            width: 100%;
        }
    }

    .address-container {
        flex-direction: column;
        align-items: flex-start;

        .el-select {
            width: 100% !important;
            margin-right: 0 !important;
            margin-bottom: 10px;
        }
    }
}
</style>